<template>
  <div id="index">
    <!-- 顶部 -->
    <div class="top">
      <!-- 文本及menu按钮 -->
      <div class="top_text">
        <span>SHI GUANG YUAN</span>
        <div class="menu_btn">
          <img @click="menuClick" src="/images/index/menu.png" />
        </div>
      </div>
      <img class="bcImg" src="https://s1.328888.xyz/2022/09/23/IqLaS.jpg" />
      <!-- menu菜单 -->
      <div :class="menu ? 'menu1' : 'menu2'">
        <p><a href="#nav_bar">Navigation Bar</a></p>
        <p><a href="#help_function">Help Function</a></p>
        <p><a href="#share_function">Sharing Function</a></p>
        <p><a href="#point_mall">POINTS Mall</a></p>
      </div>
    </div>
    <div class="main">
      <!-- about us -->
      <div class="about_us">
        <span>About Us</span>
        <van-swipe
          :autoplay="3000"
          :show-indicators="false"
          style="height: 250px"
          vertical
        >
          <van-swipe-item>
            <img src="/images/index/1.jpg" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/images/index/1.jpg" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/images/index/1.jpg" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/images/index/1.jpg" />
          </van-swipe-item>
        </van-swipe>
      </div>
      
      <!-- help function -->
      <div class="help_function" id="help_function">
        <span>Help Function</span>
        <van-swipe
          class="my-swipe"
          style="height: 260px; width: 280px"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item>
            <img
              src="https://s1.328888.xyz/2022/09/23/IqElF.png"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://s1.328888.xyz/2022/09/23/IpdSo.jpg"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://s1.328888.xyz/2022/09/23/IqNJ5.jpg"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://s1.328888.xyz/2022/09/23/IqlWN.jpg"
            />
          </van-swipe-item>
        </van-swipe>
        <!-- <hr /> -->
      </div>
      <!-- share -->
      <!-- <div class="share" id="share_function">
        <h1>SHARE</h1>
        <p class="p1">趣事越与人分享</p>
        <hr class="hr1" />
        <p class="p2">它的价值就越来越高</p>
        <hr class="hr2" />
      </div> -->
      <!-- share function -->
      <!-- <div class="share_function">
        <hr />
        <h2>Share Function</h2>
        <div class="row1">
          <img
            src="http://img.hb.aicdn.com/68476e04b4dff58f269d0ebf2d7fd227cc4d6cf5ae9d6-pjqsqD"
          />
        </div>
        <div class="row2">
          <img
            src="http://img.hb.aicdn.com/192faa89a389ea98098b59aa80eb63d9ca92cc86fb02ac-xeoSXE"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2021-06-21%2F097367caadfb7fe119c046641e6361aa%2Fonline%2F70f2606839d1707f7515f68c92282f81.jpg%3Fx-oss-process%3Dstyle%2Fresize_w_720&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655977977&t=31ed25897d5298d2bca24276d5599fb5"
          />
        </div>
      </div> -->
      <!-- nav bar -->
      <!-- <div class="nav_bar" id="nav_bar">
        <span>Navigation Bar</span>
        <div class="icon">
          <img @click="iconClick" src="/images/index/flycolor.png" />
          <img @click="iconClick" src="/images/index/helpcolor.png" />
          <img @click="iconClick" src="/images/index/home.png" />
          <img @click="iconClick" src="/images/index/mycolor.png" />
        </div>
        <div class="nav_p">
          <p>我们</p>
          <p>の</p>
          <p>主要按钮</p>
        </div>
        <hr />
      </div> -->
      <!-- point mall -->
      <!-- <div class="point_mall" id="point_mall">
        <span>Point</span>
        <p>Mall</p>
        <div class="scroll_img">
          <div class="swiper" v-for="item in url" :key="item">
            <img :src="item" alt="" />
          </div>
        </div>
        <hr />
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制菜单出现
      menu: true,
      url: [
        "http://img.hb.aicdn.com/68476e04b4dff58f269d0ebf2d7fd227cc4d6cf5ae9d6-pjqsqD",
        "http://img.hb.aicdn.com/8faa25160eb42dca94774f7697f3f552e1fc4a991173663-rU4n7C",
        "http://img.hb.aicdn.com/192faa89a389ea98098b59aa80eb63d9ca92cc86fb02ac-xeoSXE",
        "http://img.hb.aicdn.com/68476e04b4dff58f269d0ebf2d7fd227cc4d6cf5ae9d6-pjqsqD",
        "http://img.hb.aicdn.com/8faa25160eb42dca94774f7697f3f552e1fc4a991173663-rU4n7C",
        "http://img.hb.aicdn.com/192faa89a389ea98098b59aa80eb63d9ca92cc86fb02ac-xeoSXE",
      ],
    };
  },

  methods: {
    // 控制菜单出现
    menuClick() {
      this.menu = !this.menu;
      // console.log(this.menu)
    },
    // 点击跳转
    iconClick() {},
  },
};
</script>

<style lang="scss">
#index {
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #d3d3d3;
  // height: 100vh;
  // overflow: hidden;

  .top {
    // 顶部文本
    .top_text {
      text-align: center;
      background-color: #ffffff;
      position: relative;
      z-index: 1000;

      span {
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
        justify-content: center;
      }

      .menu_btn {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 5px;
        right: 30px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .bcImg {
      width: 100%;
      height: 260px;
      object-fit: cover;
    }
    // 菜单
    .menu1 {
      width: 100%;
      position: absolute;
      text-align: center;
      // background-color: #ffffff;
      background-color: #ffffff;
      transition: 0.5s;
      transform: translateY(-440px);
      padding: 10px 10px;
      height: 0px;

      p {
        border-bottom: 1px solid #000;
      }
    }
    .menu2 {
      width: 100%;
      position: absolute;
      text-align: center;
      // background-color: #ffffff;
      background-color: #ffffff;
      transition: 0.5s;
      transform: translateY(-270px);
      padding: 10px 10px 10px 10px;
      z-index: 10;

      p {
        border-bottom: 1px solid #000;

        a {
          text-decoration: none; /* 去除默认的下划线 */
          outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
          color: #000; /* 去除默认的颜色和点击后变化的颜色 */
        }
      }
    }
  }

  .main {
    .about_us {
      background-color: #ffffff;
      margin-top: -5px;
      span {
        margin-left: 25px;
        font-size: 28px;
        font-weight: 700;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .nav_bar {
      margin-top: 20px;
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: #ffffff;
      text-align: center;

      span {
        font-size: 18px;
      }
      .icon {
        margin-top: 65px;
        display: flex;
        justify-content: space-between;
        padding-left: 40px;
        padding-right: 40px;

        img {
          width: 26px;
          height: 26px;
        }
      }

      .nav_p {
        margin-top: 50px;
        font-weight: 600;
        line-height: 30px;
      }

      hr {
        margin-top: 30px;
        margin-bottom: 10px;
        border: 0;
        height: 2px;
        background-image: linear-gradient(to right, #c0c0c0, #c0c0c0, #c0c0c0);
      }
    }

    .help_function {
      background-color: #ffffff;
      text-align: center;
      padding-bottom: 30px;

      span {
        font-size: 18px;
      }
      .my-swipe {
        margin-top: 10px;
        margin-left: 47.5px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      hr {
        margin-top: 40px;
        border: 0;
        height: 2.5px;
        background-image: linear-gradient(to right, #c0c0c0, #c0c0c0, #c0c0c0);
      }
    }

    // share
    .share {
      text-align: center;
      padding-top: 10px;
      padding-bottom: 40px;
      margin-top: 0px;

      h1 {
        color: #ffffff;
        margin-bottom: 40px;
      }

      .p1 {
        font-size: 14px;
      }
      .hr1 {
        margin: 0 auto;
        width: 105px;
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, #c0c0c0, #c0c0c0, #c0c0c0);
      }
      .hr2 {
        margin: 0 auto;
        width: 150px;
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, #c0c0c0, #c0c0c0, #c0c0c0);
      }
    }
    // share function
    .share_function {
      background-color: #ffffff;
      padding: 20px 0;
      text-align: center;
      

      hr {
        border: 0;
        height: 3px;
        background-image: linear-gradient(to right, #c0c0c0, #c0c0c0, #c0c0c0);
      }

      .row1 {
        background-color: #c0c0c0;
        width: 100%;
        height: 125px;

        img {
          object-fit: cover;
          width: 125px;
          height: 100%;
        }
      }

      .row2 {
        background-color: #c0c0c0;
        display: flex;
        width: 100%;
        height: 125px;

        img {
          object-fit: cover;
          width: 125px;
          height: 100%;
        }
      }
      // img2
      .row2 :nth-child(2) {
        margin-left: 125px;
      }
    }

    // point mall
    .point_mall {
      margin-top: 10px;
      padding-top: 20px;
      margin-bottom: 100px;
      background-color: #ffffff;
      text-align: center;

      .scroll_img {
        width: 100%;
        overflow: hidden;
        display: inline-flex;
        overflow-x: scroll;

        img {
          object-fit: cover;
          margin-right: 20px;
          width: 225px;
          height: 160px;
        }
      }

      span,
      p {
        font-size: 22px;
        font-weight: 600;
      }

      hr {
        border: 0;
        height: 3px;
        background-image: linear-gradient(to right, #c0c0c0, #c0c0c0, #c0c0c0);
      }
    }
  }
}
</style>